class Pagination {
      constructor(data, options) {
            // 创建默认参数; 
            Object.assign(this, {
                  // 一页默认显示十条数据; 
                  show_num: 10,
                  // 当前的页码 ; 
                  index: 0,
                  // 分页内容总条数; 
                  count: data.length,
                  // 中间显示的页码数量; 
                  show_page_count: 5

            }, options)
            this.data = data;
            this.container = document.querySelector(".goods-list");
            this.pagination = document.querySelector(".pagination");
            // 计算总页数;
            this.total_page_num = Math.ceil(this.count / this.show_num);
            // show_page_count 数据必须是奇数;
            if (this.show_page_count % 2 !== 1) {
                  this.show_page_count++;
            }
            this.render();
            this.renderBullet();
            this.bindEvent();
      }
      bindEvent() {
            on(this.pagination, "click", "span", (e) => {
                  this.index = e.origin.innerText - 1;
                  this.render();
                  this.renderBullet();
            })
            on(this.pagination, "click", ".start", (e) => {
                  this.index = 0;
                  this.render();
                  this.renderBullet();
            })
            on(this.pagination, "click", ".end", (e) => {
                  this.index = this.total_page_num - 1;
                  this.render();
                  this.renderBullet();
            })
            on(this.pagination, "click", ".next", (e) => {
                  this.add();
            })
            on(this.pagination, "click", ".prev", (e) => {
                  this.reduce();
            })
            on(this.goods_list,"click" ,".goods" , ( e )=>{
                  // 跳转页面同时添加id值; 
                  this.go( e.origin.getAttribute("data-id" ));
            });

            this.pagination.addEventListener("selectstart", (e) => {
                  e.preventDefault();
            })
      }
      render() {
            // 页码和范围的关系 : 
            // 0    : 0 ~ 9 
            // 1    : 10 ~ 19
            // n    : n * 10 ~ (n + 1) * 10 - 1 
            let html = "";
            for (let i = this.index * this.show_num; i < (this.index + 1) * this.show_num; i++) {
                  // 如果渲染的数据不存在，那么我们就略过本次拼接;
                  if (this.data[i] === undefined) continue;
                  html += `
                <div class="goods" data-id="${this.data[i].id}">
                <img src="${this.data[i].img.src}" alt="">
                                          <div class="title">${this.data[i].img.alt}</div>
                                          <div class="pri">${this.data[i].price}</div>
                                          <a target="_blank" href="/tv/30220a6153d24bd8ad5482f75c097c5c" class="addCart">立即购买</a>
                                    </div>`
            }
            this.container.innerHTML = html;
            // location.href = "./goodsDetails.html#id=" + id;
      }
        
      go( id ){
            location.href = "./goodsDetails.html#id=" + id;
      }
      renderBullet() {
            //创建结构的核心在于，当前页面有多少条数据; 
            // - 总页数计算方式 : 总数量 / 每页显示数量 向上取整  
            let html = "";

            html += "<em class='prev'>上一页</em>"
            html += "<strong class='start'>开头</strong>"

            // start : 页码的起始点; 
            // end   : 页码的终点; 

            let start = this.index - 1;
            let end = this.index + 3;


            // - 判定分页的起始点; 
            if (this.index <= 2) {
                  start = 1;
                  end = start + this.show_page_count;
            }

            //  this.total_page_num > this.show_page_count + 1  && this.index   : 
            if (this.total_page_num > this.show_page_count + 1 && this.index >= this.total_page_num - 2) {
                  end = this.total_page_num;
                  start = end - 5;
            }

            // - end 极值判断; 
            // - end 的最大值不能超过页码总数; 

            if (end >= this.total_page_num) {
                  end = this.total_page_num;
            }
            if (!(this.total_page_num > this.show_page_count + 1)) {
                  start = 1;
            }

            if (this.total_page_num > this.show_page_count + 1 && this.index >= 3) {
                  html += "<span>1</span>"
                  html += "<b>...</b>"
            }

            // 带有省略号的渲染; 
            for (let i = start; i <= end; i++) {
                  html += `<span ${i - 1 === this.index ? "class='active'" : ""}>${i}</span>`
            }

            if (this.total_page_num > this.show_page_count + 1 && this.index <= this.total_page_num - 4) {
                  html += "<b>...</b>"
                  html += "<span>" + this.total_page_num + "</span>"
            }

            html += "<strong class='end'>结尾</strong>"
            html += "<em class='next'>下一页</em>"

            this.pagination.innerHTML = html;
      }

      add() {
            if (this.index >= this.total_page_num - 1) {
                  return false;
            }
            this.index++
            this.render();
            this.renderBullet();
      }
      reduce() {
            if (this.index <= 0) {
                  return false;
            }
            this.index--
            this.render();
            this.renderBullet();
      }
}